<template>
  <div width="100%">
    <video ref="videoElement" :id="id" controls autoplay></video>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, onMounted, ref, watch } from 'vue'
import Hls from 'hls.js';

const id = 'video_' + Math.random().toString(36).slice(2);
const videoElement = ref<HTMLVideoElement | null>(null);
// const hls = new Hls();
// const streamUrl = 'https://open.ys7.com/v3/openlive/E19477448_1_1.m3u8?expire=1742573891&id=692890175527256064&t=c1265a184e0c3910637f2003b9799d5d009aa09b36053ab8dbb2651f94172afd&ev=100'; // 替换为你的HLS流地址
const props = defineProps(
  {
    hlsUrl: {
      type: String,
      default: '',
    },
  }
);
onMounted(() => {
  if (Hls.isSupported()) {
    // 实例化 Hls 对象
    var hls = new Hls();
    // 传入路径
    hls.loadSource('https://open.ys7.com/v3/openlive/E19477448_1_2.m3u8?expire=1711964021&id=694600321984368640&t=f5983b1f364e1d3a770ceaaf539a81421230fe8d4904d41ac6f7e0b0a4e7aa7d&ev=100');
    hls.attachMedia(videoElement.value as HTMLVideoElement);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      try{
        videoElement.value?.play(); // 调用播放 API
      } catch (e) {
        console.error('播放失败', e);
      }
    });
  } else {
    alert("不支持HLS");
  }
  // if (Hls.isSupported()) {
  //   hls.loadSource( props.hlsUrl + '');
  //   hls.attachMedia(videoElement.value as HTMLVideoElement);
  //   hls.on(Hls.Events.MANIFEST_PARSED, () => {
  //     videoElement.value?.play();
  //   });
  //   hls.on(Hls.Events.ERROR, (event, data) => {
  //     console.error('HLS播放错误:', event, data);
  //   });
  // } else {
  //   console.error('当前浏览器不支持HLS流播放');
  // }
});
// watch(() => props.hlsUrl, (newVal) => {
//   if (!newVal) return;
//   const el = document.getElementById(id);
//   console.log(el, 123)
//   if (Hls.isSupported()) {
//     hls.loadSource(newVal + '');
//     console.log(el, props.hlsUrl)
//     hls.attachMedia(el as HTMLVideoElement);
//     hls.on(Hls.Events.MANIFEST_PARSED, () => {
//       // if (el) {
//       //   el.play();
//       // }
//     });
//     hls.on(Hls.Events.ERROR, (event, data) => {
//       console.error('HLS播放错误:', event, data);
//     });
//   } else {
//     console.error('当前浏览器不支持HLS流播放');
//   }
// });

</script>
<style scoped>
video {
  width: 100%;
  height: 100%;
}
</style>
